import { DatePicker, Input } from 'antd';
import { Space } from 'antd';
import style from './index.less';
import { Select } from 'antd';
import { Button } from 'antd';
import { Table } from 'antd';
import { Form } from 'antd';
import * as React from 'react';
import request from '@/http';
import moment from 'moment';
import { Link } from 'react-router-dom';
import All_style from '../../../index.less';
import { useState } from 'react';

const { Option } = Select;
const { RangePicker } = DatePicker;
const columns = [
  {
    title: '提交时间',
    dataIndex: 'submit_date',
    key: 'submit_date',
    // render: text => <a>{text}</a>,
  },
  {
    title: '项目名称',
    dataIndex: 'project_name',
    key: 'project_name',
    //   render: text => <a>{text}</a>,
  },
  {
    title: '作业主题',
    dataIndex: 'work_text',
    key: 'work_text',
    // render: text => <a>{text}</a>,
  },
  {
    title: '作业类型',
    dataIndex: 'work_type',
    key: 'work_type',
  },
  {
    title: '实训老师',
    dataIndex: 'teacher',
    key: 'teacher',
  },
  {
    title: '计划完成时间',
    dataIndex: 'plan_date',
    key: 'plan_date',
  },
  {
    title: '院系',
    dataIndex: 'college',
    key: 'college',
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major',
  },
  {
    title: '小组',
    dataIndex: 'group',
    key: 'group',
  },
  {
    title: '学号',
    dataIndex: 'student_number',
    key: 'student_number',
  },
  {
    title: '姓名',
    dataIndex: 'student_name',
    key: 'student_name',
  },
  {
    title: '操作',
    key: 'opration',
    render: (row: any) => (
      <>
        <Link
          to={{
            pathname: '/Teacher/Assignment/Approval/replyWork',
            state: { wc_state: row.wcState, wc_id: row.wcId },
          }}
        >
          处理
        </Link>
      </>
    ),
  },
];
const WaitApproval = () => {
  //项目名称下拉框绑定接口
  const [courseName, setCourseName] = React.useState([]);
  const CourseName = async () => {
    const CourseName: any = await request.put(
      '/user_info_manage/getCourseName',
    );
    setCourseName(CourseName.data);
  };
  // 实训老师下拉框接口绑定
  const [trTeacherName, setTrTeacherName] = React.useState([]);
  const TrTeacherName = async () => {
    const TrTeacherName: any = await request.put(
      '/user_info_manage/getTrTeacherName',
    );
    setTrTeacherName(TrTeacherName.data);
  };
  // 小组选择下拉框绑定接口
  const [teamName, setTeamName] = React.useState([]);
  const TeamName = async () => {
    const TeamName: any = await request.put('/user_info_manage/getTeamName');
    setTeamName(TeamName.data);
  };
  // 作业类型下拉框绑定接口
  const [workType, setWorkType] = React.useState([]);
  const WorkType = async () => {
    const WorkType: any = await request.put('/user_info_manage/getWorkType');
    setWorkType(WorkType.data);
  };

  // 条件查询待批复
  const [data, setData] = React.useState();

  interface pageInfoTypes {
    current: number;
    pageSize: number;
    total: number;
    onChange: any;
  }
  const onCurrentChange = (page: any, pageSize: any) => {
    loadData(page, pageInfo.pageSize);
  };
  const [pageInfo, setPageInfo] = useState<pageInfoTypes>({
    current: 1,
    pageSize: 5,
    total: 0,
    onChange: onCurrentChange,
  });
  const loadData = async (current: any, pageSize: any) => {
    const selectForm = await formObject.validateFields(); //获得表单数据
    // 处理日期数据
    const plan_date = selectForm?.plan_date1
      ? selectForm?.plan_date1?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const date = selectForm?.date
      ? selectForm?.date?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const submit_date = selectForm?.submit_date1
      ? selectForm?.submit_date1?.format('YYYY-MM-DD HH:mm:ss')
      : '';
    const result: any = await request.post(
      '/homeWork_manager_module/teacher/queryUnapproved',
      {
        page: current,
        number: pageSize,
        studentName: selectForm.student_name,
        courseName: selectForm.project_name,
        teamName: selectForm.group,
        workTitle: selectForm.work_text,
        workPlanTime: plan_date,
        wcCompleteTime: submit_date,
        workPubTime: date, //发布时间
        workType: selectForm.work_type,
        teacherName: selectForm.teacher,
      },
    );
    if (result.success) {
      const newData = result.data.returnDate.map((d: any, index: any) => {
        return {
          id: d.id,
          key: `key_{index}`,
          submit_date: d.wcCompleteTime,
          project_name: d.courseName,
          work_text: d.workTitle,
          work_type: d.workType,
          teacher: d.teacherName,
          plan_date: d.workPlanTime,
          college: d.collegeName,
          major: d.majorName,
          student_name: d.studentName,
          group: d.teamName,
          student_number: d.studentNo,
          wcId: d.wcId,
          wcState: d.wcState,
        };
      });
      setData(newData);
      setPageInfo({
        current: result?.data?.paginationData?.currentPage,
        pageSize: result?.data?.paginationData?.number,
        total: result?.data?.paginationData?.sum,
        onChange: pageInfo.onChange,
      });
    }
  };
  // 重置按钮
  const [formObject] = Form.useForm();
  const onReset = () => {
    formObject.resetFields();
    console.log('重置成功');
  };
  // React.useEffect(() => {
  //   CourseName();
  //   TrTeacherName();
  //   WorkType();
  //   TeamName();
  //   loadData(pageInfo.current, pageInfo.pageSize);
  // }, []);
  return (
    <div className={All_style.box}>
      <Form form={formObject} preserve={false}>
        <div style={{ clear: 'both' }}>
          <Form.Item
            label="提交时间："
            name="submit_date1"
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              className={All_style.select}
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            ></DatePicker>
          </Form.Item>

          <Form.Item
            label="作业主题："
            name="work_text"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Input
              placeholder="请输入作业主题"
              className={All_style.select}
              allowClear
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            ></Input>
          </Form.Item>

          <Form.Item
            label="项目名称："
            name="project_name"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              mode="multiple"
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              {courseName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </div>
        <div style={{ clear: 'both' }}>
          <Form.Item
            label="作业发布时间："
            name="date"
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              className={All_style.select}
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            ></DatePicker>
          </Form.Item>

          <Form.Item
            label="小组选择："
            name="group"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              mode="multiple"
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              {teamName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            label="计划完成时间:"
            name="plan_date1"
            style={{ float: 'left' }}
            className={All_style.data}
          >
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              className={All_style.select}
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            ></DatePicker>
          </Form.Item>
        </div>
        <div style={{ clear: 'both' }}>
          <Form.Item
            label="实训老师："
            name="teacher"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              mode="multiple"
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              {trTeacherName.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item
            label="学生姓名："
            name="student_name"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Input
              placeholder="请输入学生姓名"
              className={All_style.select}
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            ></Input>
          </Form.Item>

          <Form.Item
            label="作业类型:"
            name="work_type"
            style={{ float: 'left' }}
            className={All_style.formItem}
          >
            <Select
              mode="multiple"
              allowClear
              placeholder="请选择"
              className={All_style.select}
              optionFilterProp="children"
              showSearch
              onMouseDown={() => loadData(pageInfo.current, pageInfo.pageSize)}
            >
              {workType.map((c, index) => {
                return (
                  <Option key={`k_${index}`} value={c}>
                    {c}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </div>
        <div style={{ clear: 'both', float: 'right', marginRight: 80 }}>
          <Button
            onClick={() => loadData(pageInfo.current, pageInfo.pageSize)}
            className={All_style.button}
          >
            查询
          </Button>
          <Button
            htmlType="button"
            onClick={onReset}
            className={All_style.button2}
          >
            重置
          </Button>
        </div>
      </Form>

      <Table
        columns={columns}
        dataSource={data}
        className={All_style.table}
        pagination={pageInfo}
      />
    </div>
  );
};

export default WaitApproval;
